<template>
  <view class="association-page">
    <swiper
      class="association-swiper"
      :indicator-dots="true"
      :autoplay="true"
      :interval="3000"
      :duration="500"
    >
      <swiper-item
        v-for="item in carouselList"
        :key="item.id"
      >
        <image
          class="association-img"
          :src="formatImgUrl(item.imgUrl)"
          mode="aspectFill"
        />
      </swiper-item>
    </swiper>
    <van-tabs
      :active="tabActive"
      :color="'#0d8d6b'"
      title-active-color="#0d8d6b"
      title-inactive-color="#666"
    >
      <van-tab title="协会介绍">
        <view class="divider"></view>

        <view class="association-info">
          <view class="factory-detail-admin-card">
            <view class="admin-row">
              <image
                class="admin-icon"
                src="/static/icon/admin_icon.png"
              />
              <text class="admin-label">负责人：</text>
              <text class="admin-value"
                >{{ info.personChargeName }} {{ info.personChargePhone }}</text
              >
            </view>
            <view class="admin-row">
              <image
                class="admin-icon"
                src="/static/icon/map_icon.png"
              />
              <text class="admin-value">{{ info.contactAddress }}</text>
            </view>
          </view>
          <view class="factory-detail-desc">
            <rich-text :nodes="processedContent"></rich-text>
          </view>
          <view class="factory-footer-bar">
            <van-button
              class="footer-btn"
              type="primary"
              color="#0C8D6A"
              block
              round
              @click="openMap"
              >导航</van-button
            >
            <van-button
              class="footer-btn"
              type="primary"
              color="#0C8D6A"
              block
              round
              @click="callPhone"
              >联系负责人</van-button
            >
          </view>
        </view>
      </van-tab>
      <van-tab title="协会成员">
        <view class="divider"></view>

        <scroll-view
          class="member-list-scroll"
          :scroll-y="true"
          :refresher-enabled="true"
          :refresher-triggered="refreshing"
          @refresherrefresh="onRefresh"
          @scrolltolower="onLoadMore"
        >
          <view
            v-if="memberList.length === 0 && !loading"
            class="empty-tip"
          >
            暂无成员数据
          </view>
          <view
            v-for="(item, index) in memberList"
            :key="item.id"
          >
            <ArticleCardV2
              :marginTop="index === 0 ? '40rpx' : '0rpx'"
              :info="item"
            />
          </view>
          <view
            v-if="loading"
            class="loading-tip"
            >加载中...</view
          >
          <view
            v-if="!hasMore && memberList.length > 0"
            class="no-more-tip"
          >
            没有更多数据了
          </view>
        </scroll-view>
      </van-tab>
    </van-tabs>
  </view>
</template>

<script>
  import { formatImgUrl } from '../../common/utils.js'
  import {
    queryTeaGuild,
    queryMemberManageListByTeaGuildId
  } from '../../api/article.js'
  import { openNavigation } from '../../common/utils.js'
  import ArticleCardV2 from '../../components/ArticleCardV2.vue'
  import RichTextUtils from '../../common/richTextUtils.js'
  export default {
    name: 'AssociationPage',
    components: {
      ArticleCardV2
    },
    data() {
      return {
        id: '',
        info: {},
        tabActive: 0,
        carouselList: [],
        teaGuildId: '',
        memberList: [],
        pageNum: 1,
        pageSize: 10,
        hasMore: true,
        loading: false,
        refreshing: false
      }
    },
    computed: {
      processedContent() {
        return RichTextUtils.limitImageWidth(this.info.associationIntroduction)
      }
    },
    onLoad() {
      this.loadData()
    },
    methods: {
      formatImgUrl,
      async loadData() {
        try {
          const res = await queryTeaGuild({ menuType: 6 })
          console.log('res: ', res)
          if (res.code === 200) {
            this.info = res.data.teaGuild
            this.teaGuildId = res.data.teaGuild.id
            this.carouselList = res.data.cyHomeCarouselConfigs || []
            this.loadMemberList()
          }
        } catch (error) {
          console.log('error: ', error)
        }
      },
      openMap() {
        if (!this.info.contactAddress) {
          uni.showToast({ title: '无地址信息', icon: 'none' })
          return
        }
        openNavigation({
          latitude: this.info.latitude,
          longitude: this.info.longitude,
          name: this.info.contactAddress
        })
      },
      callPhone() {
        if (!this.info.personChargePhone) {
          uni.showToast({ title: '无联系电话', icon: 'none' })
          return
        }
        uni.makePhoneCall({ phoneNumber: this.info.personChargePhone })
      },
      async loadMemberList(isLoadMore = false) {
        if (this.loading) return
        this.loading = true
        try {
          const res = await queryMemberManageListByTeaGuildId({
            id: this.teaGuildId,
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            menuType: 6
          })
          const list = res.data.memberManages || []
          if (isLoadMore) {
            this.memberList = [...this.memberList, ...list]
          } else {
            this.memberList = list
          }
          this.hasMore = list.length === this.pageSize
        } catch (error) {
          console.log('error: ', error)
        } finally {
          this.loading = false
          this.refreshing = false
        }
      },
      async onRefresh() {
        this.refreshing = true
        this.pageNum = 1
        this.hasMore = true
        await this.loadMemberList()
      },
      async onLoadMore() {
        if (!this.hasMore || this.loading) return
        this.pageNum++
        await this.loadMemberList(true)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .association-page {
    min-height: 100vh;
    width: 100vw;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 120rpx;
  }
  .association-swiper {
    width: 100vw;
    height: 460rpx;
  }
  .association-img {
    width: 100%;
    height: 100%;
    border-radius: 0rpx 0rpx 60rpx 60rpx;
    object-fit: cover;
    display: block;
    background: #eee;
  }
  .factory-detail-title {
    margin: 40rpx 0;
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
    text-align: center;
  }
  .association-info {
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 40rpx;
  }
  .member-list-scroll {
    width: 100vw;
    height: 100vh;
    overflow: auto;
  }
  .factory-detail-admin-card {
    width: 686rpx;
    background: rgba(144, 165, 159, 0.1);
    border-radius: 15rpx;
    margin: 0 32rpx;
    padding: 32rpx 20rpx;
    display: flex;
    flex-direction: column;
    gap: 24rpx;
    box-sizing: border-box;
  }
  .admin-row {
    display: flex;
    align-items: center;
  }
  .admin-icon {
    width: 32rpx;
    height: 32rpx;
    margin-right: 8rpx;
  }
  .admin-label {
    font-size: 24rpx;
    color: #666666;
    margin-right: 4rpx;
  }
  .admin-value {
    font-size: 24rpx;
    color: #666666;
    word-break: break-all;
  }
  .factory-detail-desc {
    width: calc(100vw - 64rpx);
    margin-top: 47rpx;
    font-size: 28rpx;
    color: #666;
    text-align: left;
    line-height: 1.8;
  }
  .factory-footer-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    padding: 24rpx 32rpx 32rpx 32rpx;
    box-shadow: 0rpx 7rpx 46rpx 0rpx rgba(0, 0, 0, 0.33);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .footer-btn {
    flex: 1;
    height: 88rpx;
    font-size: 32rpx;
    border-radius: 44rpx;
    margin: 0 12rpx;
    font-weight: 500;
    color: #fff;
    background: #0c8d6a;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .empty-tip,
  .loading-tip,
  .no-more-tip {
    text-align: center;
    color: #999;
    font-size: 28rpx;
    padding: 30rpx 0;
  }
  .divider {
    width: 100vw;
    height: 1rpx;
    background: #f5f5f5;
  }
</style>
